<template>
    <div class="descriptionContainer">
        <img src="/src/assets/img/games/royale/leftBack02.webp" alt="">
        <div class="textDescription">
            <h1>EPIC REAL-TIME CARD BATTLES</h1>
            <p>Clash Royale is a real-time multiplayer game starring the Royales, your favourite Clash characters and
                much, much more. Collect and upgrade dozens of cards featuring the Clash of Clans troops, spells and
                defenses you know and love, as well as the Royales: Princes, Knights, Baby Dragons and more. Knock the
                enemy King and Princesses from their towers to defeat your opponents and win Trophies, Crowns and glory
                in the Arena.</p>
            <div class="app-downloads">
                <a href="https://itunes.apple.com/app/id1053012308?mt=8" target="_blank"
                   class="app-store-link"><img
                    src="/src/assets/img/footer/appstore.webp" alt="App Store"></a>
                <a href="https://play.google.com/store/apps/details?id=com.supercell.clashroyale"
                   target="_blank"
                   class="play-store-link"><img src="/src/assets/img/footer/googlestore.webp"
                                                alt="Google Play"></a>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style scoped>
.descriptionContainer {
    padding: 50px 3%;
    display: flex;
}

.descriptionContainer img {
    width: 30%;

}

.descriptionContainer .textDescription {
    width: 40%;
    margin: auto;
}

.textDescription h1 {
    font-size: 34px;
    font-weight: bold;
    margin: 23px 0;
}

.textDescription p {
    font-size: 18px;
    line-height: 1.5;
}

.app-downloads {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 23px;
}

.app-downloads a {
    margin-right: 20px;
}

.app-store-link img, .play-store-link img {
    height: 50px;
    width: auto;
    margin: 0;
    padding: 0;
}
</style>